<template slot-scope="scope">
    <div id="idtable1" class="app-container" style="width: 99%; overflow: hidden; background: #ffffff; display: block; margin-left: 20px">
        <div style="height: 8px"></div>
        <!-- <el-input v-model="searchlx" placeholder="请输入项目名称" class="input_search"></el-input>&nbsp;&nbsp;
                <el-button type="primary" @click="topage()" class="bthSearch">搜索</el-button> -->
        <!-- <el-button type="primary" @click="topage()" class="bthSearch">新增坐标</el-button> -->
        <el-button type="primary" @click="trigger()" class="bthSearch">导入坐标</el-button>
        <el-button type="primary" @click="exportToExcel()" class="bthSearch">导出坐标</el-button>
        <el-button type="primary" @click="downTextGet()" class="bthSearch">下载模板</el-button>
        <el-button type="primary" @click="downTextGet()" class="bthSearch">检查结果</el-button>
        <input type="file" ref="fileBtn" id="uploadFile" accept="image/*" @change="getFile($event)" multiple="multiple" hidden />
        <div style="height: 8px"></div>
        <div class="app-container">
            <el-table
                id="table-content"
                :data="zbinfo"
                row-key="id"
                border
                :row-style="{ height: '30px' }"
                :header-cell-style="{ background: '#005ab5', color: 'black' }"
                :row-class-name="rowClassName"
                @selection-change="handleSectionChange"
                :tree-props="{ children: 'dto', hasChildren: 'hasChildren' }"
                default-expand-all
                style="font-size: 15px; font-family: microsoft yahei; color: black"
            >
                <el-table-column type="selection" align="center" header-align="center"></el-table-column>
                <el-table-column label="地块号" prop="address" align="left" header-align="left"></el-table-column>
                <el-table-column label="点号" prop="ring" align="left" header-align="left"></el-table-column>
                <el-table-column label="圈号" prop="point" align="left" header-align="left"></el-table-column>
                <el-table-column label="X坐标" prop="longitude" align="left" header-align="left"></el-table-column>
                <el-table-column label="Y坐标" prop="dimension" align="left" header-align="left"></el-table-column>
                <el-table-column prop="date" label="操作">
                    <template slot-scope="scope">
                        <!-- 删除 -->

                        <span class="fontNormal" style="cursor: pointer" @click="delson(scope.row.id)" v-if="!scope.row.proId">删除</span>
                        <span class="fontNormal" style="cursor: pointer" @click="dels(scope.row.id)" v-if="scope.row.proId">删除</span
                        >&nbsp;
                        <!-- 修改 -->
                        <span class="fontNormal" style="cursor: pointer" @click="topage(scope.row.id)" v-if="!scope.row.proId">修改</span>
                        <span class="fontNormal" style="cursor: pointer" @click="topage(scope.row.id)" v-if="scope.row.proId">新增</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
            :current-page="page"
            :page-size="limit"
            :total="total"
            style="padding: 30px 0; text-align: center"
            background
            layout="total, prev, pager, next, jumper"
            @current-change="getList()"
        />
    </div>
</template>

<script>
import axios from 'axios';
import $ from 'jquery';
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
import information from '../../../../api/lx_infor/lx_xx';
export default {
    data() {
        return {
            dialogVisible: false, //弹出框
            zbinfo: [],
            page: 1,
            limit: 10,
            total: 0,
            courseQuery: {},
            tableChecked: [],
            tabledatas: [],
            searchlx: '',
            url: '',
            form: {
                type: '1',
                proId: $('#idframe', window.parent.document).attr('data-id')
            }
        };
    },
    created() {
        if ($('#idframe', window.parent.document).attr('data-id') == 'undefined') {
            alert('请选择项目');
            this.$router.push({ path: '/lx_info' });
        } else {
            this.getList();
        }
    },
    methods: {
        exportToExcel() {
            var link = $('<a href="http://localhost:8585/project_source/proInfo/proRange/exportFile?proId='+ this.form.proId+' &type=5" target="_blank download="下载文件.txt" "></a>');
                link.get(0).click();
        },
        // 上传文件
        trigger() {
            this.$refs.fileBtn.dispatchEvent(new MouseEvent('click'));
        },
        downTextGet() {
            var data =
                '[属性描述]' +
                ' \n ' +
                '[地块坐标]' +
                ' \n ' +
                '圈号 	点号		x坐标		    y坐标' +
                ' \n ' +
                'J1,	3,		33.33670000,	41.42430000' +
                ' \n ' +
                'J2,	3,		32.33670000,	40.42430000' +
                ' \n ' +
                'J3, 	3,		32.32460000,	40.91580000';
            // "J1,1,3239325.65000000,40543955.23250000 "+" \n "+
            // "J2,1,3239360.33670000,40543983.42430000 "+" \n "+
            // "J3,1,3239362.32460000,40543984.91580000 "+" \n "+
            // "J4,1,3239380.23580000,40543995.06550000 "+" \n "+
            // "J5,1,3239411.43700000,40544004.51450000 ";
            //判断是否是IE浏览器，是的话返回true
            if ('msSaveOrOpenBlob' in navigator) {
                //兼容ie浏览器下载报传递给系统调用的数据区域太小.

                var blob = new Blob([data], { type: 'application/vnd.ms-excel' });
                window.navigator.msSaveOrOpenBlob(blob, '模板.txt');
                return;
            } else {
                const url = window.URL.createObjectURL(new Blob([data]));
                const link = document.createElement('a');
                let fname = '模板.txt';
                link.href = url;
                link.setAttribute('download', fname);
                document.body.appendChild(link);
                link.click();
            }
        },

        // 上传文件
        getFile(event) {
            var file = event.target.files[0];
            var form = new FormData();
            form.append('file', file);
            form.append('proId', $('#idframe', window.parent.document).attr('data-id'));
            form.append('type', 5);
            information.input(form); //上传到服务器
        },
        newdaka() {
            this.dialogVisible = true;
        },
        rowClassName({ row, rowIndex }) {
            //row.xh = rowIndex + 1;
            row.xh = (this.page - 1) * 10 + 1 + rowIndex;
        },
        //跳转页面
        topage(id) {
            const { href } = this.$router.resolve({
                path: '/lx_area_xm_input',
                query: { typeid: $('#idframe', window.parent.document).attr('data-id'), landid: id }
            });
            window.open(href, '_blank');
        },
        //获取信息
        getList(page = 1) {
            this.page = page;
            information.page(this.page, this.limit, $('#idframe', window.parent.document).attr('data-id'),5).then((response) => {
                this.zbinfo = response.data.rows;
                this.total = response.data.total;
            });
        },
        //子地块删除
        delson(id) {
            // console.log(id)
            this.$confirm('此操作将删除当前的地块, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                information.deletesonInformation(id).then((res) => {
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    });
                    this.$nextTick(() => {
                        this.getList();
                    });
                });
            });
        },
        dels(id) {
            // console.log(id)
            this.$confirm('此操作将删除当前的地块, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                information.delete(id).then((res) => {
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    });
                    this.$nextTick(() => {
                        this.getList();
                    });
                });
            });
        },
        handleSectionChange(val) {
            this.tableChecked = val;
        }
    }
};
function setPaginationFontSize() {
    if ($('.el-pagination__total').css('font-size') == '13px') {
        $('.el-pagination__total').css('font-size', '15px');
        $('.el-pagination__jump').css('font-size', '15px');
    } else {
        setTimeout(function () {
            setPaginationFontSize();
        }, 100);
    }
}
function dialogFrameSrc(stype) {
    switch (stype) {
        case 'xminfo':
            window.open('view?path=/#/lx_area_xm_input');
            //$('#iddivframe').html('<iframe id="idframe" src="view?path=/#/projectdetial" frameborder="0" width="100%" height="600px"></iframe>');
            break;
        case 'sxt':
            //$('#iddivframe').html('<iframe id="idframe" src="view?path=/#/table_sxt" frameborder="0" width="100%" height="600px"></iframe>');
            break;
    }
    // if (stype == 'sxt') {
    //     //$('#iddivframe').html('<iframe id="idframe" src="/#/table_sxt" frameborder="0" width="100%" height="600px"></iframe>');
    //     $('#iddivframe').html('<iframe id="idframe" src="view?path=/#/table_sxt" frameborder="0" width="100%" height="600px"></iframe>');
    // } else {
    //     $('#iddivframe').html('<iframe id="idframe" src="http://www.baidu.com" frameborder="0" width="100%" height="600px"></iframe>');
    // }
}
</script>

<style>
.el-table__header {
    width: 100% !important;
}
.el-table__body {
    width: 100% !important;
}
.el-table th {
    background-color: #e2e2e2 !important;
}
.el-table .cell {
    text-overflow: clip;
}
.input_search {
    width: 150px;
}
.divtitle {
    font-family: 微软雅黑;
    font-size: 25px;
    color: #356cb3;
}
.btnSearchAdv {
    border-color: #356cb3;
    color: #356cb3;
    font-size: 15px;
    font-family: 微软雅黑;
}
.bthSearch {
    background-color: #356cb3;
    font-size: 15px;
    font-family: 微软雅黑;
}
.bthNormal {
    border-color: #848484;
    font-size: 15px;
    font-family: 微软雅黑;
}
.el-tabs--border-card {
    border: 1px solid #ffffff;
}
.lableFont {
    font-size: 15px;
    font-family: 微软雅黑;
    color: black;
}

.tabPaneLs .el-icon-lx-home {
    background-image: url('../../../../assets/img/el-tab-pane-dkjl.png') !important;
    background-size: 100% 99%;
}
.tabPaneLs .el-icon-lx-home::before {
    visibility: hidden;
}

.tabPaneTj .el-icon-lx-home {
    background-image: url('../../../../assets/img/el-tab-pane-dktj.png') !important;
    background-size: 100% 99%;
}
.tabPaneTj .el-icon-lx-home::before {
    visibility: hidden;
}
.fontNormal {
    color: #356cb3;
    font-size: 15px;
    font-family: 微软雅黑;
}
.pageNormal {
    padding: 30px 0;
    text-align: center;
    font-size: 15px;
    font-family: 微软雅黑;
    color: black;
}

.el-pagination__total {
    color: #000000;
    font-family: 微软雅黑;
}
.el-pagination__jump {
    color: #000000;
    font-family: 微软雅黑;
}
</style>